<template>
  <div class="bgc-default pad-20">
    <div class="bg-color-white pad-20">
      <el-row class="hint-area el-row" v-show="hintVisible">
        <el-col :span="18">
          <span
            class="pad-l-20">当前已【{{enterpriseConfig.recruiterDefaultExamineFlag === 1 ? '开启' : '关闭'}}】自动审核招募员申请，可前往参数设置{{enterpriseConfig.recruiterDefaultExamineFlag === 1 ? '关闭' : '开启'}}。</span>
          <el-button type="text" @click="goConfigSet">立即前往</el-button>
        </el-col>
        <el-col :span="6" align="right">
          <el-button type="info" icon="el-icon-close" class="hint-icon" circle @click="closeHint"></el-button>
        </el-col>
      </el-row>
      <div class="v-align-c height-68">
        <el-button type="primary" @click="buttonAdd">新增</el-button>
        <el-button type="primary" plain @click="getRecruiterH5QRCode">H5二维码</el-button>
        <div class="font-16 mar-l-20">
          <span>累计招募员数：<span class="font-red">{{recruiterCount}}人</span></span>
          <span>|</span>
          <span>累计招募微客数：<span class="font-red">{{memberCount}}人</span></span>
        </div>
      </div>
      <div class="top-operate-default">
        <div class="search-item">
          <label>搜索招募员：</label>
          <el-input v-model="searchKeyword" @keyup.enter.native="handleSearch" placeholder="请输入搜索关键字"
            style="width: 200px"></el-input>
          <label class="mar-l-20">性别：</label>
          <el-select v-model="searchGender" placeholder="性别" class="pad-l-10">
            <el-option v-for="(val, key) in dict.gender" :key="key" :label="val" :value="key">
            </el-option>
          </el-select>
          <label class="mar-l-20">所属上级：</label>
          <el-select v-model="searchPartnerType" placeholder="所属上级类型" class="pad-l-10">
            <el-option label="全部" value=" " />
            <el-option v-for="(val, key) in dict.partnerType" :key="key" :label="val" :value="key" />
          </el-select>
          <label class="mar-l-20">状态：</label>
          <el-select v-model="searchStatusFlag" placeholder="状态" class="pad-l-10">
            <el-option v-for="(val, key) in dict.statusFlag" :key="key" :label="val" :value="key">
            </el-option>
          </el-select>
          <label class="mar-l-20">创建时间：</label>
          <el-date-picker v-model="startEndTime"
            style="margin-left: 10px"
            type="daterange"
            unlink-panels
            range-separator="至"
            value-format="yyyy-MM-dd"
            start-placeholder="开始时间"
            end-placeholder="结束时间">
          </el-date-picker>
          <el-button-group>
            <el-button type="primary" @click="handleSearch" style="margin-left: 10px">查询</el-button>
            <el-button plain @click="resetSearch">重置</el-button>
          </el-button-group>
        </div>
      </div>

      <div class="tabs-box mar-t-15">
        <el-tabs type="card" v-model="applyStatus" @tab-click="handleSearch">
          <el-tab-pane :label="passedLabel" name="1"></el-tab-pane>
          <el-tab-pane :label="waitCheckLabel" name="0"></el-tab-pane>
          <el-tab-pane :label="rejectLabel" name="2"></el-tab-pane>
        </el-tabs>
      </div>

      <!-- 全选、操作 -->
      <div>
        <div class="pad-t-15 pad-b-15 font-14 v-align-c">
          <el-checkbox class="mar-l-14 mar-r-0" v-model="allChecked" @change="selectAll"><span
              class="mar-l-20">当页全选</span></el-checkbox>
          <span class="pad-l-4 pad-r-4">|</span>
          <div class="width-80">已选{{multipleSelection.length}}项</div>
          <div v-if="applyStatus == '1'">
            <el-button class="batch-btn" @click="batchUpStatusFlag">批量启用</el-button>
            <el-button class="batch-btn" @click="batchDownStatusFlag">批量禁用</el-button>
            <el-button class="batch-btn" @click="batchDelete">批量删除</el-button>
            <!-- <el-button  type="primary" @click="showDefaultDistributeRatio" >默认分销比例</el-button> -->
          </div>
          <div v-if="applyStatus == '0'">
            <el-button class="batch-btn" @click="handleBatchPass(undefined)">批量通过</el-button>
            <el-button class="batch-btn" @click="handleBatchReject(undefined)">批量拒绝</el-button>
          </div>

        </div>
      </div>
      <!-- 内容列表 -->
      <div class="table-container">
        <el-table ref="multipleTable" :data="recruiterList" @selection-change="handleSelectionChange"
          v-loading="listLoading" element-loading-text="加载中" style="width: 100%" header-cell-class-name="default-header"
          row-class-name="default-row">
          <el-table-column width="50px" type="selection"></el-table-column>
          <el-table-column min-width="240px" label="所属上级" prop="partnerType" fixed="left">
            <template slot-scope="scope">
              <div class="font-14" style="color:#155bd4;">
                {{ scope.row.partnerType == 3 ? scope.row.enterpriseName : scope.row.partnerName }}</div>
              <span class="font-13">[{{ dict.partnerType[scope.row.partnerType]}}]</span>
            </template>
          </el-table-column>
          <el-table-column width="160px" label="姓名" prop="realname" fixed="left">
            <template slot-scope="scope">
              <div @click="updateRecruiter(scope.row)">
                <a><span style="color: #2d8cf0">{{scope.row.realname}}</span></a>
              </div>
            </template>
          </el-table-column>
          <el-table-column min-width="160px" label="性别" prop="gender" v-if="applyStatus == '1'">
            <template slot-scope="scope">
              {{ dict.gender[scope.row.gender]}}
            </template>
          </el-table-column>
          <el-table-column min-width="200px" label="手机号" prop="phone"></el-table-column>
          <el-table-column min-width="200px" label="招募微客数" prop="veekerNum" v-if="applyStatus == '1'">
            <template slot-scope="scope">
              <div class="flex" @click="goRecruiterMember(scope.row, 1)">
                <div class="width-56 text-align-r">店主：</div>
                <a><span style="color: #2d8cf0">{{scope.row.veekerNum||0}}</span></a>
              </div>
              <div class="flex" @click="goRecruiterMember(scope.row, 2)">
                <div class="width-56 text-align-r">批发商：</div>
                <a><span style="color: #2d8cf0">{{scope.row.wholesaleNum||0}}</span></a>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            v-if="(getVersionType() == 1 || getVersionType() == 2 || getVersionType() == 3) && applyStatus == '1'"
            min-width="200px" label="抽佣比例" prop="commissionPercent">
            <template slot-scope="scope">
              {{scope.row.commissionPercent}}%
            </template>
          </el-table-column>
          <el-table-column min-width="200px" label="分销比例" prop="sellGoodsPercent" v-if="applyStatus == '1'">
            <template slot-scope="scope">
              {{scope.row.sellGoodsPercent}}%
            </template>
          </el-table-column>
          <el-table-column min-width="200px" label="状态" prop="statusFlag" v-if="applyStatus == '1'">
            <template slot-scope="scope">
              {{ dict.statusFlag[scope.row.statusFlag]}}
            </template>
          </el-table-column>
          <el-table-column width="200px" label="申请时间" prop="applyDate" v-if="applyStatus == '0'" key="99">
          </el-table-column>
          <el-table-column width="200px" label="拒绝时间" prop="rejectDate" v-if="applyStatus == '2'" key="100">
          </el-table-column>
          <el-table-column width="150px" label="拒绝原因" prop="rejectReason" v-if="applyStatus == '2'" key="101">
            <template slot-scope="scope">
              <el-popover placement="top" width="220" trigger="click">
                <div class="flex-col">
                  <span>{{ scope.row.rejectReason }}</span>
                </div>
                <el-button slot="reference" type="text">查看原因</el-button>
              </el-popover>
            </template>
          </el-table-column>
          <!-- <el-table-column width="150px" label="业绩">
            <template slot-scope="scope">
              <span>订单：</span><a style="color: #2d8cf0" @click="recruiterOrder(scope.row)">{{scope.row.orderNum}}笔</a><br/>
              <span>金额：{{scope.row.orderAmount}}</span>
            </template>
          </el-table-column> -->

          <el-table-column min-width="230px" label="操作" align="right" fixed="right">
            <template slot-scope="scope">
              <div v-if="applyStatus == '1'">
                <el-button type="text" size="medium" @click="updateRecruiter(scope.row)">编辑</el-button>
                <el-button type="text" size="medium" @click="changeStatusFlag(scope.row)"
                  :disabled="scope.row.defaultFlag == 1">
                  <template v-if="scope.row.statusFlag == 1">
                    禁用
                  </template>
                  <template v-if="scope.row.statusFlag == 0">
                    启用
                  </template>
                </el-button>
                <el-button type="text" size="medium" @click="handleDelete(scope.row)"
                  :disabled="scope.row.defaultFlag == 1">
                  删除
                </el-button>
                <el-button type="text" size="medium" @click="handlePassword(scope.row)">
                  重置密码
                </el-button>
              </div>
              <div v-if="applyStatus == '0'">
                <el-button type="text" size="medium" @click="handleBatchPass(scope.row)">通过</el-button>
                <el-button type="text" size="medium" @click="handleBatchReject(scope.row)">拒绝</el-button>
              </div>

            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 列表分页 -->
      <div class="pagination">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="recruiterListQuery.currentPage" :page-sizes="[10, 20, 50, 100]"
          :page-size="recruiterListQuery.size" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
    <!-- 添加/编辑 -->
    <div>
      <el-dialog width="600px" v-el-drag-dialog :visible.sync="dialogFormVisible" :before-close="handleDialogClose">
        <el-form ref="recruiterForm" :model="form" :rules="rules" label-position="right" label-width="150px"
          style='width: 80%; margin-left:50px;'>
          <el-row>
            <el-form-item label-width="80px" label="姓名" prop="realname">
              <el-input v-model="form.realname" placeholder="请输入姓名"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label-width="80px" label="性别" prop="gender">
              <el-select v-model="form.gender" placeholder="请输入性别">
                <el-option v-for="(val, key) in dict.gender" :key="key" :label="val" :value="key">
                </el-option>
              </el-select>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label-width="80px" label="手机号" prop="phone">
              <el-input v-model="form.phone" type="tel" placeholder="请输入手机号"></el-input>
            </el-form-item>
          </el-row>
          <el-row v-if="getVersionType() != 5">
            <el-form-item label-width="80px" label="抽成比例" prop="commissionPercent"
              v-if="getVersionType() == 1 || getVersionType() == 2 || getVersionType() == 3">
              <el-input v-model="form.commissionPercent" placeholder="输入任务众包，内容分发的抽佣比例">
                <template slot="append">%</template>
              </el-input>
              设置招募员招募微客后在完成任务众包、内容分发后抽取微客酬金的抽佣比例。
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label-width="80px" label="分销提成" prop="sellGoodsPercent">
              <el-input v-model="form.sellGoodsPercent" placeholder="输入商品分销月销售额的提成比例">
                <template slot="append">%</template>
              </el-input>
              设置招募员发展的微客分销商品后，累计月销售额的提成比例。
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label-width="80px" label="备注" prop="remark">
              <el-input type="textarea" :rows="2" v-model="form.remark" placeholder="请输入备注">
              </el-input>
            </el-form-item>
          </el-row>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="close">取消</el-button>
          <el-button type="primary" @click="saveData">确定</el-button>
        </div>
      </el-dialog>
      <el-dialog width="400px" v-el-drag-dialog :visible.sync="recruiterQRCodeVisible" :close-on-press-escape="true">
        <div class="text-align-c">
          <img :src="recruiterQRCode" class="width-200">
        </div>
        <div class="text-align-c">
          <div>点击右键保存图片并发送给招募员，</div>
          <div>通过它登录移动端管理页面</div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="recruiterQRCodeVisible = false">关闭</el-button>
        </div>
      </el-dialog>
      <el-dialog width="500px" v-el-drag-dialog :visible.sync="defaultDistributeRatioVisible">
        <el-form>
          <el-form-item label-width="120px" label="默认分销比例" prop="commissionPercent" class="width-per-90">
            <el-input v-model="defaultDistributeRatio" placeholder="请输入默认分销比例"
              @keyup.native="defaultDistributeRatio = checkInputNum(defaultDistributeRatio)">
              <template slot="append">%</template>
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="defaultDistributeRatioVisible = false">取消</el-button>
          <el-button type="primary" @click="setDefaultDistributeRatio">确认</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 拒绝弹窗 -->
    <el-dialog title="拒绝原因" width="400px" v-el-drag-dialog :visible.sync="rejectVisible">
      <el-input type="textarea" :rows="3" v-model="rejectForm.rejectReason" placeholder="请输入拒绝原因"
        class="pad-l-30 pad-r-30"></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="doCancelReject">取消</el-button>
        <el-button type="primary" @click="doSaveReject">确定</el-button>
      </div>
    </el-dialog>
  </div>


</template>


<style scoped>
  .tips {
    height: 45px;
    line-height: 45px;
    font-size: 14px;
    background-color: #fff7cc;
    color: #333333;
    padding-left: 20px;
  }

  .gopage {
    color: #0075ff;
    cursor: pointer;
  }

  .hint-area {
    background-color: #fdf8c8;
    padding: 10px 0;
    margin-bottom: 20px;

    .hint-icon {
      padding: 1px;
      margin: 10px 10px 0 0;
    }
  }
</style>

<script>
  import {
    pagingRecruiterList,
    saveRecruiter,
    changeStatusFlag,
    deleteRecruiter,
    batchUpStatusFlag,
    batchDelete,
    countRecruiter,
    changePassword,
    getRecruiterH5QRCode,
    getDefaultDistributeRatio,
    setDefaultDistributeRatio,
    statStatRecruiter,
    updateBatchApplyStatus
  } from '@/api/user/recruiter'
  import elDragDialog from '@/directive/el-dragDialog' // base on element-ui
  import {
    getByEnterpriseId
  } from '@/api/user/enterprise'
  export default {
    directives: {
      // 拖动窗口
      elDragDialog
    },
    data() {
      return {
        recruiterList: [],
        startEndTime: [],
        total: null,
        listLoading: true,
        multipleSelection: [],
        showDelResetBtn: false,
        recruiterListQuery: {
          enterpriseId: this.getEnterpriseId(),
          currentPage: 1,
          size: 10
        },
        form: {
          recruiterId: '',
          enterpriseId: this.getEnterpriseId(),
          username: '',
          password: '',
          realname: '',
          gender: '1',
          phone: '',
          remark: '',
          commissionPercent: '',
          statusFlag: '1',
          sellGoodsPercent: ''
        },
        enterpriseConfig: {},
        searchStatusFlag: '',
        searchPartnerType: '',
        searchKeyword: '',
        searchGender: '',
        dialogFormVisible: false,
        dialogStatus: '',
        isHaveDict: false,
        recruiterCount: 0,
        memberCount: 0,
        waitCheckCount: 0,
        recruiterQRCodeVisible: false,
        recruiterQRCode: '',
        defaultDistributeRatioVisible: false,
        defaultDistributeRatio: 0,
        dict: {},
        allChecked: false,
        rules: {
          username: [{
            required: true,
            message: '请输入登陆账号',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: '请输入登陆密码',
            trigger: 'blur'
          }],
          realname: [{
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }],
          gender: [{
            required: true,
            message: '请输入性别',
            trigger: 'blur'
          }],
          phone: [{
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          }],
          commissionPercent: [
            { required: false,
              message: '请输入抽成比例',
              trigger: 'blur'
            },
            {
              pattern: /(^(\d|[1-9]\d|100)(\.\d{1,2})?$)/,
              message: '请输入正确抽成比例'
            }
          ],
          sellGoodsPercent: [{
            required: false,
            message: '分销抽成比例',
            trigger: 'blur'
          },
          {
            pattern: /(^(\d|[1-9]\d|100)(\.\d{1,2})?$)/,
            message: '请输入正确分销抽成比例'
          }
          ]
        },
        // 申请状态
        applyStatus: '1',
        passedLabel: '已通过(0)',
        waitCheckLabel: '待审核(0)',
        rejectLabel: '已拒绝(0)',
        rejectVisible: false,
        // 拒绝表单数据
        rejectForm: {
          rejectReason: '',
          recruiterId: ''
        },
        // 自动审核提示
        hintVisible: true,
        dateColumn: 'createTime'
      }
    },
    // 初始化页面
    created() {
      this.initRecruiterList()
      this.initEnterpriseConfig()
    },
    methods: {
      close() {
        this.dialogFormVisible = false
      },
      recruiterOrder(row) {
        this.$router.push({
          path: '/order/order/index',
          query: {
            recruiterId: row.recruiterId,
            orderStatus: '80',
            startEndTime: this.startEndTime,
            timeCol: 'payTime',
            showStatOrder: '0'
          }
        })
      },
      handleDialogClose() {
        this.dialogFormVisible = false
      },
      // 自动审核提示框关闭事件
      closeHint() {
        this.hintVisible = false
      },
      // 拒绝事件
      handleBatchReject(row) {
        if (row === undefined) {
          if (this.multipleSelection.length <= 0) {
            this.$message.error('请选择要操作的数据')
            return
          }
        }
        this.rejectVisible = true
        this.rejectForm.recruiterId = row.recruiterId
      },
      // 拒绝取消
      doCancelReject() {
        this.rejectForm.rejectReason = ''
        this.rejectForm.recruiterId = ''
        this.rejectVisible = false
      },
      // 拒绝确定
      doSaveReject() {
        const recruiterIds = []
        if (this.rejectForm.recruiterId) {
          recruiterIds.push(this.rejectForm.recruiterId)
        } else {
          if (this.multipleSelection.length > 0) {
            this.multipleSelection.forEach((item) => {
              recruiterIds.push(item.recruiterId)
            })
          } else {
            this.$message.error('请选择要操作的数据')
            this.rejectVisible = false
            return
          }
        }
        const params = {
          applyStatus: 2,
          recruiterIds: recruiterIds.join(','),
          rejectReason: this.rejectForm.rejectReason
        }
        updateBatchApplyStatus(params).then(response => {
          this.doCancelReject()
          if (response.isError) return
          this.initRecruiterList()
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        })
      },
      // 批量通过
      handleBatchPass(row) {
        if (row === undefined) {
          if (this.multipleSelection.length <= 0) {
            this.$message.error('请选择要操作的数据')
            return
          }
        }
        this.$confirm('确认审核通过?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const recruiterIds = []
          if (row) {
            recruiterIds.push(row.recruiterId)
          } else {
            this.multipleSelection.forEach((item) => {
              recruiterIds.push(item.recruiterId)
            })
          }
          const params = {
            applyStatus: 1,
            recruiterIds: recruiterIds.join(','),
            rejectReason: ''
          }
          updateBatchApplyStatus(params).then(response => {
            if (response.isError) return
            this.initRecruiterList()
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
          })
        })
      },
      // 统计招募员根据申请状态
      initStatRecruiter() {
        this.setQueryParams()
        statStatRecruiter(this.recruiterListQuery).then(response => {
          let passedNum = 0
          let waitCheckNum = 0
          let rejectNum = 0
          if (!response.isError) {
            const entity = response.data
            if (entity[1]) {
              passedNum = entity[1]
            }
            if (entity[0]) {
              waitCheckNum = entity[0]
            }
            if (entity[2]) {
              rejectNum = entity[2]
            }
            this.passedLabel = '已通过(' + passedNum + ')'
            this.waitCheckLabel = '待审核(' + waitCheckNum + ')'
            this.rejectLabel = '已拒绝(' + rejectNum + ')'
          }
        })
      },
      initEnterpriseConfig() {
        getByEnterpriseId(this.getEnterpriseId()).then((response) => {
          if (response.isError) return
          this.enterpriseConfig = response.data
        })
      },
      initRecruiterList() {
        this.setQueryParams()
        this.initCountRecruiter()
        this.initStatRecruiter()
        const that = this
        that.listLoading = true
        pagingRecruiterList(this.recruiterListQuery).then(response => {
          const recruiterList = response.records
          that.recruiterList = recruiterList
          that.total = response.total
          that.listLoading = false
          if (!that.isHaveDict) {
            that.dict = response.dict
            that.isHaveDict = true
          }
        })
      },
      initCountRecruiter() {
        const enterpriseId = this.getEnterpriseId()
        var data = {
          enterpriseId: enterpriseId
        }
        countRecruiter(data).then(response => {
          const recruiterCount = response.data.recruiterCount
          const memberCount = response.data.memberCount
          const waitCheckCount = response.data.waitCheckCount
          this.recruiterCount = recruiterCount
          this.memberCount = memberCount
          this.waitCheckCount = waitCheckCount
        })
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.recruiterListQuery.size = val
        this.initRecruiterList()
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.recruiterListQuery.currentPage = val
        this.initRecruiterList()
      },
      // 勾选
      handleSelectionChange(val) {
        this.multipleSelection = val
        if (this.multipleSelection.length === this.recruiterList.length) {
          this.allChecked = true
        } else {
          this.allChecked = false
        }
      },
      setQueryParams() {
        if (this.searchStatusFlag) {
          this.recruiterListQuery['statusFlag'] = this.searchStatusFlag
        }
        if (this.searchKeyword) {
          this.recruiterListQuery['keyword'] = this.searchKeyword
        }
        if (this.searchPartnerType) {
          this.recruiterListQuery['partnerType'] = this.searchPartnerType
        }
        if (this.searchGender) {
          this.recruiterListQuery['gender'] = this.searchGender
        }
        this.recruiterListQuery.applyStatus = this.applyStatus
        this.recruiterListQuery.dateColumn = this.dateColumn
        if (this.startEndTime && this.startEndTime.length > 0) {
          this.recruiterListQuery.startDate = this.startEndTime[0] + ' 00:00:00'
          this.recruiterListQuery.endDate = this.startEndTime[1] + ' 23:59:59'
        } else {
          this.recruiterListQuery.startDate = ''
          this.recruiterListQuery.endDate = ''
        }
      },
      // 查询
      handleSearch() {
        this.recruiterListQuery.currentPage = 1
        this.initRecruiterList()
      },
      resetSearch() {
        this.recruiterListQuery = {
          enterpriseId: this.getEnterpriseId(),
          currentPage: 1,
          size: 10
        }
        this.startEndTime = []
        this.searchStatusFlag = ''
        this.searchKeyword = ''
        this.searchPartnerType = ''
        this.searchGender = ''
        this.initRecruiterList()
      },
      // 添加
      buttonAdd() {
        this.resetrecruiter()
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['recruiterForm'].clearValidate()
        })
      },
      // 清空信息
      resetrecruiter() {
        this.form = {
          recruiterId: '',
          enterpriseId: this.getEnterpriseId(),
          username: '',
          password: '',
          realname: '',
          gender: '1',
          phone: '',
          remark: '',
          commissionPercent: '',
          statusFlag: '1',
          sellGoodsPercent: ''
        }
      },
      // 保存
      saveData() {
        const that = this
        this.$refs['recruiterForm'].validate((valid) => {
          if (valid) {
            if ((this.getVersionType() * 1 !== 5 || this.getVersionType() * 1 !== 4) && (this.form
              .commissionPercent < 0 || this.form.commissionPercent > 100)) {
              that.$message.error('抽成比例输入错误!')
              return
            }
            saveRecruiter(this.form).then((response) => {
              if (response.isError) {
                return
              }
              that.initRecruiterList()
              that.dialogFormVisible = false
              that.$message({
                type: 'success',
                message: '保存成功!'
              })
            })
          }
        })
      },
      // 编辑
      updateRecruiter(row) {
        // 清除赋值
        this.resetrecruiter()
        row.gender = row.gender + ''
        this.form = Object.assign(this.form, row) // copy obj
        this.dialogStatus = 'update'
        this.dialogFormVisible = true

        this.$nextTick(() => {
          this.$refs['recruiterForm'].clearValidate()
        })
      },
      goRecruiterMember(row, memberType) {
        const recruiterId = row.recruiterId
        if (this.getVersionType() === '4') {
          if (memberType === 1) {
            this.$router.push({
              path: '/user/member-shopkeeper/index',
              query: {
                recruiterId: recruiterId
              }
            })
          }
          if (memberType === 2) {
            this.$router.push({
              path: '/user/member-wholesale/index',
              query: {
                recruiterId: recruiterId
              }
            })
          }
        } else {
          this.$router.push({
            path: '/user/member/index',
            query: {
              recruiterId: recruiterId
            }
          })
        }
      },
      statusFlagType(row) {
        const statusFlag = row.statusFlag
        if (statusFlag === 0) {
          return 'primary'
        } else {
          return 'danger'
        }
      },
      // 修改招募员状态
      changeStatusFlag(row) {
        let statusFlag = row.statusFlag
        if (statusFlag === 0) {
          statusFlag = 1
        } else {
          statusFlag = 0
        }
        this.$confirm('此操作禁用，是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          changeStatusFlag(row.recruiterId, statusFlag).then(() => {
            this.initRecruiterList()
            this.$message({
              type: 'success',
              message: '修改状态'
            })
          })
        }).catch(() => {})
      },
      // 删除
      handleDelete(row) {
        this.$confirm('此操作将删除该招募员信息，是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteRecruiter(row.recruiterId).then(() => {
            this.initRecruiterList()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          })
        }).catch(() => {})
      },
      getRecruiterH5QRCode() {
        getRecruiterH5QRCode(this.getVersionType(), this.getEnterpriseId()).then(response => {
          if (response.isError) return
          this.recruiterQRCode = response.data
          this.recruiterQRCodeVisible = true
        })
      },
      showDefaultDistributeRatio() {
        getDefaultDistributeRatio(this.getEnterpriseId()).then(response => {
          if (response.isError) return
          this.defaultDistributeRatio = response.data
          this.defaultDistributeRatioVisible = true
        })
      },
      setDefaultDistributeRatio() {
        if (this.defaultDistributeRatio * 1 > 100) {
          this.$message({
            type: 'error',
            message: '比例不能超过100!'
          })
          return
        }
        setDefaultDistributeRatio(this.getEnterpriseId(), this.defaultDistributeRatio).then(response => {
          if (response.isError) return
          this.$message({
            type: 'success',
            message: '保存成功!'
          })
          this.defaultDistributeRatioVisible = false
        })
      },
      batchUpStatusFlag() {
        var that = this
        const multipleSelection = this.multipleSelection
        const array = []
        multipleSelection.forEach((e) => {
          array.push(e.recruiterId)
        })
        batchUpStatusFlag(array, '1').then(response => {
          that.initRecruiterList()
        })
      },
      batchDownStatusFlag() {
        var that = this
        const multipleSelection = this.multipleSelection
        const array = []
        multipleSelection.forEach((e) => {
          array.push(e.recruiterId)
        })
        batchUpStatusFlag(array, '0').then(response => {
          that.initRecruiterList()
        })
      },
      batchDelete() {
        var that = this
        this.$confirm('此操作将删除该数据，是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const multipleSelection = this.multipleSelection
          const array = []
          multipleSelection.forEach((e) => {
            array.push(e.recruiterId)
          })
          batchDelete(array, '0').then(response => {
            that.initRecruiterList()
          })
        }).catch(() => {})
      },
      // 重置密码
      handlePassword(row) {
        this.$confirm('此操作将重置该招募员信息，是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var data = {
            recruiterId: row.recruiterId
          }
          changePassword(data).then(() => {
            this.$message({
              type: 'success',
              message: '重置成功!'
            })
          })
        }).catch(() => {})
      },
      selectAll() {
        if (this.multipleSelection.length === 0 || this.multipleSelection.length < this.recruiterList.length) {
          this.recruiterList.forEach(item => {
            this.$refs.multipleTable.toggleRowSelection(item, true)
          })
        } else {
          this.$refs.multipleTable.clearSelection()
        }
      },
      goConfigSet() {
        // 去参数配置页面
        this.$router.push({
          path: '/system/system-config/index',
          query: {
            active: 'recruiter-set'
          }
        })
      }
    },
    // 过滤器
    filters: {
      statusFilter(status) {
        const statusMap = {
          1: 'success',
          2: 'danger'
        }
        return statusMap[status]
      }
    }
  }
</script>
